let container = document.querySelector('.pullevent-con')
let circleLeft = document.querySelector('.circleLeft')
let circleRight = document.querySelector('.circleRight')
let pullText = document.querySelector('.pull_text')

const MINHEIGHT = 10
const PULLDISTANCE = 50
let startX, startY, deltaX, deltaY, offsetX, offsetY  

function touchStartFunc(e) {
  const touch = e.touches[0] 
  startX = touch.clientX
  startY = touch.clientY
}

function touchMoveFunc(e) {

  function ease(distance) {

    if (distance > PULLDISTANCE) {
      if (distance < PULLDISTANCE * 2) {
        distance = PULLDISTANCE + (distance - PULLDISTANCE) / 2
      } else {
        distance = PULLDISTANCE * 1.5 + (distance - PULLDISTANCE * 2) / 4
      }
    }

    return Math.round(distance)
  }
  
  function getCirclePercent(distance) {

    function getPercent(distance) {
        return distance / (PULLDISTANCE / 2)
    }
    if (distance > PULLDISTANCE) {
      circleLeft.style.transform = 'rotate(225deg)'
      circleRight.style.transform = 'rotate(45deg)'
      pullText.textContent = "松手创建新item"
      return
    } else if (distance < PULLDISTANCE / 2) {
      circleRight.style.transform = `rotate(${-135 + 180 * getPercent(distance)}deg)`
      circleLeft.style.transform = `rotate(45deg)`
    } else if (distance > PULLDISTANCE / 2) {
      circleRight.style.transform = 'rotate(45deg)'
      circleLeft.style.transform = `rotate(${ 45 + 180 * getPercent(distance - PULLDISTANCE / 2)}deg)`
    }

    pullText.textContent = "继续下拉创建,松手取消"



  }

  const touch = e.touches[0] 
  deltaX = touch.clientX - startX
  deltaY = touch.clientY - startY
  offsetX = Math.abs(deltaX)
  offsetY = Math.abs(deltaY) || 0

  let distance = ease(offsetY)
  getCirclePercent(offsetY)
  container.style.transform = `translate3d(0, ${distance}px, 0)`

}

function touchEnd(e) {
  // 如果移动距离小于 MINHEIGHT 则默认不发生滚动

  pullText.textContent = ""

  if (offsetX < MINHEIGHT && offsetY < MINHEIGHT) return
  container.style.transform = `translate3d(0, 0, 0)`
  circleLeft.style.transform = `rotate(45deg)`
  circleRight.style.transform = `rotate(-135deg)`
}

// const touchmoveFuncT = throttle(touchMoveFunc, 16)

container.addEventListener('touchstart', touchStartFunc)
// container.addEventListener('touchmove', touchmoveFuncT)
container.addEventListener('touchmove', touchMoveFunc)
container.addEventListener('touchend', touchEnd)
container.addEventListener('touchcancel', touchEnd)
